<template>
    <div>
        <el-row v-if="reload">
            <div v-for="(row, i) of plant2" :key="i">
                <plant-row :rowData="row" rowKey="totanyId"></plant-row>
            </div>
        </el-row>
        <el-row>
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="queryInfo.page" background
                :page-size="20" layout="->,prev, pager, next" :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
import { page } from "@/api/plantApi";
import PlantRow from "./PlantRow.vue";
const options = {
    created() {
        this.init();
    },
    components: {
        PlantRow
    },
    data() {
        return {
            plants: [],
            total: 10
        }
    },
    computed: {
        plant2() {
            return this.pages(this.plants, 5);
        },
        queryInfo() {
            return this.$store.state.frontQuery;
        },
        queryName() {
            return this.$store.state.frontQuery.name;
        }
    },
    watch: {
        queryName(n, o) {
            console.log(`newdata:${n}<--oldData:${o}`);
            this.getPlants();
        }
    },
    methods: {
        init() {
            this.getPlants();
        },
        handleCurrentChange(page) {
            this.$store.commit("setFrontQuery", { page: page });
            this.getPlants();
        },
        pages(list, size) {
            const pages = []
            list.forEach((item, index) => {
                const page = Math.floor(index / size)
                if (!pages[page]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages
        },
        getPlants() {
            console.log("get plants");
            let that = this;
            this.reload = false;
            // console.log(this.queryInfo);
            page(this.queryInfo ?? { page: 1, pageSize: 20 }).then((resp) => {
                that.plants = resp.data.data.records;
                that.total = resp.data.data.total;
                this.reload = true;
            })
        }
    }
}

export default options;
</script>